<script setup>
import { ref } from 'vue'
import { genFileId } from 'element-plus'

const props = defineProps({
  tip: {
    type: String,
    default: ''
    },
  btnText: {
    type: String,
    default: '选择Excel文件'
  },
  handleChange: {
    type: Function,
    default:  () => {}
  },
  showFileList: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

const uploadFileExp = ref()
defineExpose({
  uploadFileExp
})

const handleChangeWrapper = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles)
  uploadFileExp.value = uploadFile
  return props.handleChange(uploadFile)
}

const upload = ref()
const handleExceed = (files) => {
  upload.value.clearFiles()
  uploadFileExp.value = files[0]
  uploadFileExp.value.uid = genFileId()
  upload.value.handleStart(uploadFileExp.value)
}
</script>

  <template>
    <el-upload
      v-if="!multiple"
        ref="upload"
        :limit="1"
        :auto-upload="false"
        :on-change="handleChangeWrapper"
        :show-file-list="showFileList"
        :on-exceed="handleExceed"
    >
      <template #trigger>
        <el-button type="primary">{{btnText}}</el-button>
      </template>
      <template #tip>
        <div class="el-upload__tip text-red">
          {{tip}}
        </div>
      </template>
    </el-upload>
    <el-upload
      v-else
      ref="upload"
      :auto-upload="false"
      :on-change="handleChangeWrapper"
      :show-file-list="showFileList"
      ></el-upload>
  </template>

<style scoped lang="scss">
</style>